---
title: "React Print"
sidebarTitle: "Introduction"
description: "Build PDFs using React and TypeScript."
icon: "hand-wave"
---

## Why ?

<Callout intent="note" title="React Print outputs an HTML string">
  React Print is meant to help developers design PDFs. It outputs an HTML string
  that can be used to generate a PDF using a renderer like the [FileForge
  API](/api-reference/api-reference/generate).
</Callout>

We believe documents are at the core of communication—invoices, contracts, resumes, brochures, etc. They are the primary method for exchanging information with others professionally. So, why do we continue to use decades-old technology to create them? We believe you deserve better. Document production needs to be modernized. Start today and create your next PDF the same way you build a web app. And yes, this includes automating data integration into your documents. **Say hello to react-print.**

<Card 
  title='@fileforge/react-print-pdf'
  icon='fa-brands fa-github'
  href='https://github.com/OnedocLabs/react-print-pdf'
>
Contribute to development and give us a ⭐️
</Card>

## Getting Started

React Print is designed to be incrementally adopted, so you can add it to most codebases in a few minutes.

<Callout intent="launch" title="React Print">
  React Print is your go-to library for creating PDFs using React and
  TypeScript. It provides a set of components to help you build amazing
  documents without having to deal with the mess of creating complex layouts and
  maintaining archaic markup.
</Callout>
<Card title="Set up" icon="hammer" href="/react-print/welcome/setup">
  Create a brand-new folder with packages powered by React Print.
</Card>

## Components

A set of standard components to help you build amazing documents without having to deal with the mess of creating complex layouts and maintaining archaic markup.

<Cards>
  <Card
    title="compile"
    icon="fa-solid fa-code"
    href="/react-print/components/compile"
  >
    Compile a React component to a string with the Onedoc print styles.
  </Card>
  <Card
    title="CSS"
    icon="fa-brands fa-css3-alt"
    href="/react-print/components/css"
  >
    Allows adding CSS to the document while securely parsing and escaping it.
  </Card>
  <Card
    title="Footnote"
    icon="fa-solid fa-info"
    href="/react-print/components/footnote"
  >
    Create automatically numbered footnotes.
  </Card>
  <Card
    title="LaTeX"
    icon="fa-solid fa-square-root-variable"
    href="/react-print/components/latex"
  >
    Render LaTeX formulas right in your React components.
  </Card>
  <Card
    title="Markdown"
    icon="fa-brands fa-markdown"
    href="/react-print/components/markdown"
  >
    Render Markdown inside your templates.
  </Card>
  <Card
    title="Shell"
    icon="fa-solid fa-border-all"
    href="/react-print/components/shell"
  >
    Display content in other page regions.
  </Card>
  <Card
    title="Signature"
    icon="signature"
    href="/react-print/components/signature"
  >
    Add signature fields to your document.
  </Card>
  <Card
    title="Tailwind"
    icon="fa-solid fa-wind"
    href="/react-print/components/tailwind"
  >
    A simple, drop-in way to use Tailwind CSS in your components.
  </Card>
  <Card
    title="Variables"
    icon="fa-solid fa-subscript"
    href="/react-print/components/variables"
  >
    Display dynamic values based on your document, such as page numbers and
    running headers.
  </Card>
</Cards>
<Note>
  Help us increase the number of components and start being an active member of
  the react-print community by
  [contributing](/react-print/contributing/contributing)
</Note>

# Rendering

PDFs component created by react-print can be rendered, hosted (and more) with your preferred providers. We recommend using the [FileForge API](/api-reference/api-reference/generate) as it has been specificaly build to work with react-print.

<CardGroup>
  <Card title="FileForge API" href="/api-reference/api-reference/generate">
    Manage your document using Onedoc
  </Card>
  <Card title="Others" href="">
    Coming soon ..
  </Card>

</CardGroup>

## Authors

- Auguste L. ([@thisisnotFranck](https://twitter.com/thisisnotfranck))
- Pierre D. ([@pierre_dge120](https://twitter.com/pedro_dge120))
- Titouan L. ([@titouan325](https://twitter.com/titouan325))
